/* eslint-disable react-native/no-inline-styles */
/* eslint-disable react-hooks/exhaustive-deps */
import React, {useEffect, useState} from 'react';
import {
  Dialog,
  PanningProvider,
  View,
  Text,
  Colors,
  Constants,
} from 'react-native-ui-lib';
import {DeviceEventEmitter, useWindowDimensions} from 'react-native';

function RootDialog() {
  const {width} = useWindowDimensions();
  const [state, setstate] = useState({
    visible: false,
    //backgroundColor: Colors.primaryColor,
    onDismiss: () => {
      setstate(s => ({
        ...s,
        visible: false,
      }));
    },
    showDismiss: false,
    showLoader: false,
  });

  useEffect(() => {
    const listen = DeviceEventEmitter.addListener('dialog', params => {
      setstate({
        ...state,
        visible: true,
        ...params,
      });
    });
    return () => {
      listen.remove();
    };
  }, []);

  const renderPannableHeader = props => {
    const {title} = props;
    return (
      <View>
        <View margin-18>
          <Text heading>{title}</Text>
        </View>
      </View>
    );
  };

  return (
    <Dialog
      {...state}
      renderPannableHeader={renderPannableHeader}
      pannableHeaderProps={state}
      panDirection={PanningProvider.Directions.DOWN}
      bottom={true}
      width={width - 24}
      // overlayBackgroundColor={'transparent'}
      containerStyle={{
        backgroundColor: Colors.colorCardBg,
        marginBottom: Constants.isIphoneX ? 0 : 18,
        borderRadius: 12,
      }}>
      <View padding-18 paddingT-0>
        {typeof state.content === 'string' ? (
          <Text body>{state.content}</Text>
        ) : (
          state.content
        )}
        {state?.action ? (
          <View marginT-18 right>
            {typeof state.action === 'function'
              ? state.action(setstate)
              : state.action}
          </View>
        ) : null}
      </View>
    </Dialog>
  );
}

export default RootDialog;
